<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { useSystemStore } from "@/store/login";
import { getTagPageTagList } from "@/api/module/login";

import CustomLayout from "./components/custom-layout.vue";
import CustomTable from "./components/custom-table.vue";
import {
  getAppId
} from '@/utils/core'

const route = useRoute();
const systemStore = useSystemStore();

const additionId = (route.meta.addition as any).id || "";

const pageId = ref("");
const checkedTag = ref("0");
const topTagList = ref([]);

const tagPageGetTagList = async () => {
  let query = {
    clientMacro: JSON.stringify({
      treeKey: "",
      treeName: "",
      appId: getAppId(),
    }),
    pageId: additionId,
  };
  ///用于获取顶部信息
  const response = await getTagPageTagList(query);
  if (response.code == "1000") {
    topTagList.value = response.data;
    systemStore.tagListInfo = response.data[0];
    pageId.value = response.data[0]["id"];
  }
};

const changCheckedTag = async () => {
  systemStore.tagListInfo = JSON.parse(
    JSON.stringify(
      topTagList.value.filter((item: any) => item["id"] == checkedTag.value),
    ),
  );
  pageId.value = topTagList.value[parseInt(checkedTag.value)]["id"];
};

onMounted(() => {
  tagPageGetTagList();
});
</script>

<template>
  <custom-layout>
    <lay-tab
      class="noContentHeight"
      @change="changCheckedTag"
      v-model="checkedTag"
    >
      <lay-tab-item
        v-for="(item, index) in topTagList"
        :title="item['name']"
        :id="index.toString()"
        :key="item['name']"
      >
        <custom-table
          v-if="checkedTag == index + ''"
          :pageId="pageId"
        ></custom-table
      ></lay-tab-item>
    </lay-tab>
  </custom-layout>
</template>

<style lang="less" scoped>
.noContentHeight {
  .layui-tab-content {
    padding: 0 !important;
  }
}
</style>
